<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="修改昵称" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="display-flex shubox just-between">
			<input type="nickname" v-model="userInfo.username" maxlength="20"/>
			<text style="font-size: 24rpx;color: #9E9E9E;">{{20- userInfo.username.length}}</text>
		</view>
			
			<view class="xubox">
				<view class="xutxt">
					填写说明:<br>
					最多可设置20个字符，可设置含有中文、英文、数字、符号组合的昵称，但不建议设置特殊字符。<br>
					
					温馨提示：<br>
					1、1个符号相当于一个汉字，2个数字/英文相当于1个汉字。<br>
					2、如果昵称设置不了或修改后不更新，您可稍后设置。<br>
					3、设置昵称请勿违反<text @click.stop="goToxie">《dream约文账号昵称修改规则》</text>
					
				</view>
			</view>
		<view class="ti" @click="saveUser()">
			保存
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: this.$db.get('userInfo'),
			}
		},
		onShow() {
			// this.getUserInfo()
		},
		onLoad() {

		},
		methods: {
			getUserInfo() {
				this.$api.default.request('user/userInfo').then((res) => {
					if (res.code) {
						this.userInfo = res.user
						this.index = res.user.sex?res.user.sex:0
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			goToxie(){
				uni.navigateTo({
					url: '/pages/user/abount_dea?id=5' 
				})
				// uni.navigateTo({
				// 	url:'/pages/webview/webview?url=' +this.$config.default.Url + '/agreement/1000004'
				// })
			},
			bindNick(e) {
				if (e.detail.value != this.userInfo.username) {
					this.userInfo.username = e.detail.value
				}
			},
			saveUser() {
				var prams = {
					'username': this.userInfo.username
				}
				this.$api.default.request('user/saveUser', prams).then((res) => {
					if (res.code == 1) {
						this.$db.set('userInfo',res.user)
						this.userInfo = res.user
						this.$common.successToShow(res.msg,()=>{
							uni.navigateBack()
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content {
		padding-top: 20rpx;

		.shubox {
			padding: 40rpx 68rpx;
			background-color: #ffffff;
			color: #3d3d3d;
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}
		.xubox {
			padding: 20rpx 60rpx 260rpx;
		
			.xutxt {
				font-size: 20rpx;
				line-height: 37rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #999999;
				text{
					color: #45C4B0;
					font-size: 20rpx;
				}
			}
		}
		.ti {
			width: 630rpx;
			height: 86rpx;
			border-radius: 8px;
			line-height: 86rpx;
			margin: 0 auto;
			opacity: 1;
			background: #45C4B0;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0em;
			color: #FFFFFF;
		}
	}
</style>